<template>
  <div class="header home-header">
    <Menu mode="horizontal" theme="primary" active-name="1" style="background:#3488e3">
      <!--<div class="layout-logo"></div>-->
      <div class="layout-nav">
        <div class="logo">
            <img src="../assets/images/logo/logo.png"  class="logo"/>
        </div>
        <MenuItem name="1">
          <Icon type="ios-navigate"></Icon>
            用户管理
        </MenuItem>
        <MenuItem name="2">
          <Submenu name="2">
            <template slot="title">
              <!--<Icon type="person"></Icon>-->
              <template v-if="this.loginForm.avatar==='http://192.168.1.249null'||this.loginForm.avatar==='http://192.168.1.249'||this.loginForm.avatar==='null'||this.loginForm.avatar===''"></template>
              <template v-else>
                <img class="home-top-photo" :src="'http://192.168.1.249'+this.loginForm.avatar">
              </template>
              <!--<template v-if="this.loginForm.avatar">
                <img class="home-top-photo" :src="'http://192.168.1.249'+this.loginForm.avatar">
              </template>-->
              <!--<template v-else></template>--><!--可展示默认图标-->
              {{this.loginForm.userName}}-{{this.loginForm.employeeName}}
            </template>
            <MenuItem name="2-1">
              <Icon type="home"></Icon>
                <router-link style="display:inline-block;width: 70px;" :to="{ path: '/user'}">我的主页</router-link>
            </MenuItem>
            <!--<MenuItem name="2-2">
              <Icon type="ios-chatboxes"></Icon>
              <router-link :to="{ path: '/setting' }">我的信息</router-link>
            </MenuItem>-->
            <MenuItem name="2-2">
              <Icon type="gear-b"></Icon>
              <router-link style="display:inline-block;width: 70px;" :to="{ path: '/password/'+this.ids }">修改密码</router-link>
            </MenuItem>
            <MenuItem name="2-3">
              <Icon type="power"></Icon>
              <span @click="loginOut" style="display:inline-block;width: 70px;">退出</span>
            </MenuItem>
          </Submenu>
        </MenuItem>
        <p style="color:#fff;cursor: pointer;" @click="unread">
          <Icon type="email-unread"></Icon>
          消息({{this.unreadMsgCount}})
        </p>

      </div>
    </Menu>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios'
import {getLoginOutApi} from '../http/loginOut.api'
import {mountMessageApi} from '../http/message.api'
import { getUserPersonalData } from '../http/user.api'
import * as menuOpr from '../http/menu.opt.api'

  export default {
    name: 'Header',
    data () {
      return {
          timer: null,
          unreadMsgCount: 0,
          ids: localStorage.getItem('id'),
          loginForm: {
              userName: localStorage.getItem('userName'),
              employeeName: localStorage.getItem('employeeName'),
              avatar: ''
          },
         mountArgs: {
            search: {
                status: 'OPEN',//未读
                recipient: localStorage.getItem('userName'), //收件人
            }
        },
        userVal: 'exitSystem',
        userInfo: [
          {
            label: '退出',
            value: 'exitSystem'
          }
        ]
      }
    },
    components: {

    },
      created () {
        this.mountMessage();
        this.mount();
        this.getUserData()
      },
      methods: {
          loginOut(){
              const _this = this;
              getLoginOutApi().then(resp => {
                  _this.success = resp.data.success
              }).catch(err => {
                  // this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
              }).finally(function (res) {
                  localStorage.clear()
                  _this.$router.push('/login')
              })
          },
          getUserData(){
              getUserPersonalData().then(suc => {
                  this.loginForm.avatar = suc.data.result.avatar
              })
          },
          mountMessage(){
              mountMessageApi(this.mountArgs).then(resp => {
                  this.unreadMsgCount = resp.data.result
                  /*this.spinShow = false*/
              }).catch(err => {
                  console.log("err= "+err)
                 /* this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                  this.spinShow = false*/
              })
          },
          mount(){
              let that = this;
              this.timer = setInterval(function(){
                  that.mountMessage();
              },300000)
              this.getMenuCodes()
          },
          destroyed() {
              if (this.timer) {
                  clearInterval(this.timer)
                  this.timer = null;
              }
          },
          unread(){
              this.$router.push('/setting')
          },
          getMenuCodes() {
              const _this = this;
              menuOpr.getMenuCodes({
                  module: '101',  // 101 用户管理 201 物流跟踪号共享平台
                  userName: localStorage.getItem('userName')
                  // userName: _this.userInfo.userName
              }).then(function (res) {
                  // console.log(res.data.result)
                  _this.$store.commit('login/setMenuPermission', res.data.result)
              }).catch(function (err) {
                  console.log(err)
              })
              menuOpr.getMenus(['menu-logistics-track', 'menu-usermgt', 'menu-logistics-engine']).then(function (res) {
                  // console.log(res.data.result)
                  _this.$store.commit('login/setMenus', res.data.result&&res.data.result[1]||null)
              }).catch(function (err) {
                  console.log(err)
              })
          }
      }
  }
</script>

<style scoped>
.layout-logo{
  /*width: 400px;*/
  /*height: 100%;*/
  /*background: url('../assets/images/logo/logoMenu.png') no-repeat;*/
  background-size:contain;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 5px;
  left: 20px;
}
.layout-nav{
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  height:100%;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-nav{
  width: auto;
}
  .home-top-photo{
    width:20px;
    height:20px;
  }
</style>
